﻿@using Abp.Application.Services.Dto
@using Abp.Authorization.Users
@using Abp.Timing;
@using MVlog.Web.Areas.AppAreaName.Models.Common.Modals
@using MVlog.Web.Areas.AppAreaName.Models.Profile
@model MySettingsViewModel

@Html.Partial("~/Areas/AppAreaName/Views/Common/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("MySettings")))

<div class="modal-body">

    <div class="tabbable-line">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#MySettingsTab" data-toggle="tab" aria-expanded="true">
                    @L("Profile")
                </a>
            </li>
            <li class="">
                <a href="#TwoFactorLoginTab" data-toggle="tab" aria-expanded="false">
                    @L("TwoFactorLogin")
                </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="MySettingsTab">

                <form name="MySettingsModalForm">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input class="form-control edited" type="text" name="Name" value="@Model.Name" required maxlength="@AbpUserBase.MaxNameLength">
                        <label>@L("Name")</label>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="text" name="Surname" class="form-control edited" value="@Model.Surname" required maxlength="@AbpUserBase.MaxSurnameLength">
                        <label>@L("Surname")</label>
                    </div>

                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <input type="email" name="EmailAddress" class="form-control edited" value="@Model.EmailAddress" required maxlength="@AbpUserBase.MaxEmailAddressLength">
                        <label>@L("EmailAddress")</label>
                    </div>
                @if (Model.CanVerifyPhoneNumber())
                {
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                        <div class="input-group">
                            <div class="input-group-control">
                                <input type="text" name="PhoneNumber" class="form-control edited" value="@Model.PhoneNumber" maxlength="@MVlog.Authorization.Users.User.MaxPhoneNumberLength">
                                <label>@L("PhoneNumber")</label>
                            </div>
                            @if (!Model.IsPhoneNumberConfirmed)
                            {
                                <span id="SpanSmsVerificationUnverified"  class="input-group-btn btn-right tooltips" data-original-title="@L("YourPhoneNumberIsNotVerified")">
                                    <button id="btnSmsVerification" class="btn default" type="button"><i class="fa fa-warning"></i> @L("Verify")</button>
                                </span>

                                <span id="SpanSmsVerificationVerified" style="display: none;" class="input-group-addon tooltips phone-number-verified" data-original-title="@L("YourPhoneNumberIsVerified")">
                                    <i class="fa fa-check font-green"></i>
                                </span>
                            }
                            else
                            {
                                <span class="input-group-addon tooltips phone-number-verified" data-original-title="@L("YourPhoneNumberIsVerified")">
                                    <i class="fa fa-check font-green"></i>
                                </span>
                            }
                        </div>
                    </div>
                }
                else
                {
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            <input type="text" name="PhoneNumber" class="form-control edited" value="@Model.PhoneNumber" maxlength="@MVlog.Authorization.Users.User.MaxPhoneNumberLength">
                            <label>@L("PhoneNumber") </label>
                    </div>
                }
                    <div class="form-group form-md-line-input form-md-floating-label">
                        <input type="text" @Html.Raw(!Model.CanChangeUserName ? "disabled=\"disabled\"" : "") class="form-control edited" value="@Model.UserName" name="UserName" required maxlength="@AbpUserBase.MaxUserNameLength">
                        <label>@L("UserName")</label>
                        @if (!Model.CanChangeUserName)
                        {
                            <span class="help-block">@L("CanNotChangeAdminUserName")</span>
                        }
                    </div>
                    @if (Clock.SupportsMultipleTimezone)
                    {
                        <div class="form-group form-md-line-input form-md-floating-label no-hint">
                            @Html.DropDownList("Timezone", Model.TimezoneItems.Select(i => i.ToSelectListItem()), new { @class = "form-control edited" })
                            <label>@L("Timezone")</label>
                        </div>
                    }
                </form>
            </div>
            <div class="tab-pane" id="TwoFactorLoginTab">
                <div>
                    <h4>
                        Google Authenticator
                    </h4>

                    <div class="google-authenticator-enable" style="@(!Model.IsGoogleAuthenticatorEnabled ? "display:none" : "")">
                        <div>
                            @L("ScanQrCodeWithYourMobileApp")
                        </div>
                        <div class="text-center">
                            <img src="@Model.QrCodeSetupImageUrl" />
                        </div>
                        <small>
                            @L("GoogleAuthenticatorReferrerLink"): <a href="https://support.google.com/accounts/answer/1066447" target="_blank" rel="noopener noreferrer">Google Authenticator</a>
                        </small>
                    </div>

                    <div class="google-authenticator-enable" style="@(Model.IsGoogleAuthenticatorEnabled ? "display:none" : "")">
                        <button type="button" class="btn blue" id="btnEnableGoogleAuthenticator">@L("Enable")</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@Html.Partial("~/Areas/AppAreaName/Views/Common/Modals/_ModalFooterWithSaveAndCancel.cshtml")